@import '../../../styles/var.scss';
@import '../../../styles/mixins.scss';

.m-product-brief {
  padding: 0 32px;
  background: #ffffff;
  border-radius: 16px;

  & + & {
    margin-top: 24px;
  }

  &-header {
    border-bottom: 2px solid $border-color-base;
  }

  &-body {
    display: flex;
    justify-content: flex-start;
    gap: 24px;
    padding: 32px 0;

    &-image {
      flex-shrink: 0;
      width: 144px;
      height: 144px;
    }

    &-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 18px;
      overflow: hidden;

      &-title-text,
      &-desc {
        width: 100%;
        @include ellipsis;
      }

      &-title {
        display: flex;
        align-items: center;
        gap: 8px;
        overflow: hidden;

        &-text {
          flex: 1;
          font-size: $font-size-base;
          color: $text-color-main;
          font-weight: 500;
        }
      }

      &-desc {
        font-size: $font-size-small;
        color: $text-color-secondary;
        font-weight: 400;
      }

      &-total {
        font-size: $font-size-small;
        color: $text-color-main;
        text-align: right;
      }
    }
  }

  &-footer {
    border-top: 2px solid $border-color-base;
  }
}
